<template>
  <div class="user-container">
    <!-- 页面标题 -->
    <el-page-header
        @back="handleBack"
        content="用户信息管理"
        class="page-header"
    ></el-page-header>

    <!-- 查询区域 -->
    <el-card class="search-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
              v-model="empno"
              placeholder="请输入员工编号"
              clearable
              @keyup.enter.native="show1"
          >
            <el-button
                slot="append"
                icon="el-icon-search"
                @click="show1"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button
              type="primary"
              @click="show1"
          >
            查询
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
          :data="userList"
          border
          stripe
          highlight-current-row
          style="width: 100%"
      >
        <el-table-column
            prop="empno"
            label="编号"
            width="80"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="ename"
            label="姓名"
            width="100"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="job"
            label="工作"
            width="120"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="mgr"
            label="管理者编号"
            width="120"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="hiredate"
            label="入职时间"
            width="160"
            align="center"
        ></el-table-column>
        <el-table-column
            prop="sal"
            label="工资"
            width="100"
            align="center"
            :formatter="formatSalary"
        ></el-table-column>
        <el-table-column
            prop="comm"
            label="补贴"
            width="100"
            align="center"
            :formatter="formatAllowance"
        ></el-table-column>
        <el-table-column
            prop="deptno"
            label="部门号"
            width="100"
            align="center"
        ></el-table-column>
      </el-table>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog
        title="员工详情"
        :visible.sync="dialogVisible"
        width="50%"
        center
    >
      <el-descriptions column="1" border>
        <el-descriptions-item label="员工编号">{{ currentUser.empno }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ currentUser.ename }}</el-descriptions-item>
        <el-descriptions-item label="工作">{{ currentUser.job }}</el-descriptions-item>
        <el-descriptions-item label="管理者编号">{{ currentUser.mgr || '-' }}</el-descriptions-item>
        <el-descriptions-item label="入职时间">{{ currentUser.hiredate }}</el-descriptions-item>
        <el-descriptions-item label="工资">{{ formatSalary(currentUser) }}</el-descriptions-item>
        <el-descriptions-item label="补贴">{{ formatAllowance(currentUser) }}</el-descriptions-item>
        <el-descriptions-item label="部门号">{{ currentUser.deptno }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 加载中提示 -->
    <el-loading
        v-if="loading"
        text="加载中..."
        fullscreen
    ></el-loading>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "UserView",
  data() {
    return {
      userList: [],
      empno: null,
      dialogVisible: false,
      currentUser: {},
      loading: false
    }
  },
  methods: {
    // 加载数据
    fetchData() {
      this.loading = true
      axios.get("/emp")
          .then(res => {
            console.log(res.data)
            const R = res.data
            this.userList = R.data || []
          })
          .catch(error => {
            console.log(error)
            this.$message.error('数据加载失败，请重试')
          })
          .finally(() => {
            this.loading = false
          })
    },
    // 根据ID查询
    show1() {
      if (!this.empno) {
        this.$message.warning('请输入员工编号')
        return
      }

      this.loading = true
      axios.get(`/emp/${this.empno}`)
          .then(res => {
            console.log(res.data)
            const data = res.data.data
            if (data) {
              this.currentUser = data
              this.dialogVisible = true
            } else {
              this.$message.info('未找到该员工信息')
            }
          })
          .catch(error => {
            console.log(error)
            this.$message.error('查询失败，请重试')
          })
          .finally(() => {
            this.loading = false
          })
    },
    // 格式化工资
    formatSalary(row) {
      return row.sal ? `¥${row.sal.toFixed(2)}` : '0.00'
    },
    // 格式化补贴
    formatAllowance(row) {
      return row.comm || row.comm === 0 ? `¥${row.comm.toFixed(2)}` : '-'
    },
    // 返回按钮
    handleBack() {
      this.$router.back() // 如果使用路由可以返回上一页
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.user-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
  background-color: #fff;
}

.table-card {
  background-color: #fff;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
  .user-container {
    padding: 10px;
  }

  .el-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .el-col {
    width: 100% !important;
  }
}
</style>